<template>
  <div>
    <el-button @click="showDialop">打开弹框</el-button>
    <form-dialog
      :visible="basicDialogProps.visible"
      :loading="basicDialogProps.loading"
      :width="basicDialogProps.width"
      :title="basicDialogProps.title"
      @handleClose="close"
    >
      <template v-slot:content>
        <el-form label-position="right" ref="form" :model="form">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域活">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="footer-button">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit('form')">确定</el-button>
        </div>
      </template>
    </form-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import FormDialog from '../../components/Dialog/formDialog.vue'

export default Vue.extend({
  components: {
    FormDialog
  },
  data() {
    return {
      basicDialogProps: {
        visible: false,
        width: '30%',
        title: '',
        loading: false
      },
      form: {
        name: '',
        region: ''
      }
    }
  },
  methods: {
    showDialop() {
      this.basicDialogProps.visible = true
      this.basicDialogProps.title = '这是一个弹框'
      this.basicDialogProps.loading = true
    },
    close() {
      this.basicDialogProps.visible = false
    },
    submit(formName: any) {
      console.log(this.form)
    }
  }
})
</script>

<style lang="scss" scoped>
 div {
   width: auto;
 }

 .footer-button {
   display: flex;
   justify-content: flex-end;
 }
</style>
